<template>
	<div class="content">
		<div class="zip">
			<div class="title">
				<div class="textcon">姓名：蒋峰</div>
				<div class="textcon">性别：女</div>
				<div class="textcon">年龄：24岁</div>
			</div>
			<div class="time">报告日期：2020-08-09</div>
			<div style="display: flex;justify-content: flex-end;;margin-top: 15px;"><div><span style="font-size: 12px;">合计：</span><span style="font-size: 17px;color: #F46363;font-weight: 600;margin-right: 10px">¥450.00</span></div></div>
		</div>
<div style="background-color: #ffffff;border: 1px solid #f3f3f3;padding: 20px 10px 0 10px;margin-top: 20px;box-shadow: azure;">
		<div class="title">
			费用明细
		</div>
		<div class="cont" style="display: flex; justify-content: space-between;align-items: center;padding: 5px 0;">
			<div class="phone"><div class="navsd">普罗布考片</div><div class="zpw"><span>单价：¥50.00</span><span style="margin-left: 10px;">数量：3</span></div></div>
			<div class="phonename" style="color: #333333;font-weight: 500;">¥150.00</div>
		</div>
		<div class="cont" style="display: flex; justify-content: space-between;align-items: center;padding: 5px 0;">
			<div class="phone"><div class="navsd">阿司匹林肠溶片</div><div class="zpw"><span>单价：¥50.00</span><span style="margin-left: 10px;">数量：3</span></div></div>
			<div class="phonename" style="color: #333333;font-weight: 500;">¥150.00</div>
		</div>
		<div class="cont" style="display: flex; justify-content: space-between;align-items: center;padding: 5px 0; border: 0;">
			<div class="phone"><div class="navsd">阿托伐他汀片</div><div class="zpw"><span>单价：¥50.00</span><span style="margin-left: 10px;">数量：3</span></div></div>
			<div class="phonename" style="color: #333333;font-weight: 500;">¥150.00</div>
		</div>
	</div>
	</div>
</template>

<script>
</script>

<style>
	.zpw {
		color: #AAAAAA;
		font-size: 12px;
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    text-align: left;
		    line-height: 28px;
	}
	.navsd{
		font-size: 14px;
		font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    text-align: left;
		    line-height: 28px;
			    color: #333333;
	}
	.title{
		    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
		    font-weight: 400;
		    font-style: normal;
		    color: #AAAAAA;
			border-bottom: 1px solid #f3f3f3;
			padding: 5px 0 10px 0;
	}
	.phonename{
		margin-left: 15px;
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 14px;
	}
	.phone{
		    color: #AAAAAA;
			font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
			    font-weight: 200;
			    font-style: normal;
			    font-size: 14px;
				
	}
	.cont{
		display: flex;
		align-items: center;
		height: 50px;
				border-bottom: 1px solid rgba(242, 242, 242, 1);
	}
	.address{
		    font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-size: 12px;
		    color: #7F7F7F;
	}
	.namehosp{
		font-size: 15px;font-family: 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
	font-style: normal;
	}
	.img{
		width: 40px;
		margin-right: 10px;
		height: 40px;
		
	}
	.context{
		flex: 70%;
	}
	.right{
		flex: 10%;
	}
	.zp{
		padding: 0 10px;
	}
	.nav {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 72px;
		padding: 5px;
		border-bottom: 1px solid rgba(242, 242, 242, 1);
	}
	.time{
		padding: 15px 0;
		color: #caccce;
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
		    font-size: 12px;
			border-bottom: 2px dashed #d7d7d7;
	}
	.textcon{
		flex: 1;
		font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC', sans-serif;
		    font-weight: 200;
		    font-style: normal;
			font-size: 14px;
			color: #474848;
	}
	.title{
		display: flex;
	}
	.zip{
		background-color: #f5f9ff;
		padding: 20px 15px;
	}
	.content{
		padding: 15px;
	}
</style>